<template>
  <div>
    <vm-cell label="表号"
             style="margin-top:15px;"
             :hasTopBorder="true">
      <input slot="title"
             placeholder="请输入表号"
             v-model="params.ele_table_no"
             class="input" />
    </vm-cell>
    <vm-cell label="户名">
      <input slot="title"
             placeholder="请输入户名"
             v-model="params.ele_table_account"
             class="input" />
    </vm-cell>
    <vm-cell label="地址">
      <input slot="title"
             placeholder="请输入地址"
             v-model="params.ele_table_address"
             class="input" />
    </vm-cell>
    <vm-cell label="联系电话">
      <input slot="title"
             placeholder="请输入联系电话"
             v-model="params.ele_table_phone"
             class="input" />
    </vm-cell>
    <vm-cell label="备注">
      <input slot="title"
             placeholder="请输入备注"
             v-model="params.remark"
             class="input" />
    </vm-cell>

    <vm-button text="提交"
               class="mt-3"
               @buttonClicked="submit"></vm-button>
  </div>
</template>
<script>
import VmCell from '../../components/vm-cell.vue'
import VmButton from '../../components/vm-button.vue'

export default {
  components: { VmButton, VmCell },
  props: {},
  data() {
    return {
      params: {
        customer_id: '',
        customer_related_id: '',
        ele_table_account: '',
        ele_table_address: '',
        ele_table_no: '',
        ele_table_phone: '',
        remark: '',
        submit_type: 3
      },
      id: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getParams()
  },
  methods: {
    getParams() {
      this.$router.getParams().then(res => {
        const data = res || {}
        Object.keys(this.params).forEach(key => {
          this.params[key] = data[key] || ''
        })
        this.params.submit_type = 3
        this.id = data.credit_ele_table_id || ''
      })
    },
    submit() {
      if (!this.params.ele_table_no) {
        return this.$notice.toast({ message: '请输入表号' })
      }
      if (!this.params.ele_table_account) {
        return this.$notice.toast({ message: '请输入户名' })
      }
      if (!this.params.ele_table_address) {
        return this.$notice.toast({ message: '请输入地址' })
      }
      if (!this.id) {
        this.addData()
      } else {
        this.updateData()
      }
    },
    addData() {
      this.$notice.loading.show()
      this.$api.addData({
        server: 'credit',
        table: 'datum_customer_ele_table',
        data: this.params,
        errorMsg: '添加电表失败'
      }).then(res => {
        this.$notice.toast({ message: '添加电表成功' })
        this.$router.setBackParams({ type: 1 })
        this.$router.back()
      }).finally(() => {
        this.$notice.loading.hide()
      })
    },
    updateData() {
      this.$notice.loading.show()
      this.$api.updateData({
        server: 'credit',
        table: 'datum_customer_ele_table',
        id: this.id,
        data: this.params,
        errorMsg: '修改电表失败'
      }).then(res => {
        this.$notice.toast({ message: '修改电表成功' })
        this.$router.setBackParams({ type: 1 })
        this.$router.back()
      }).finally(() => {
        this.$notice.loading.hide()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.input {
  flex: 1;
  height: 60px;
  font-size: 30px;
  tint-color: #999;
}
.mt-3 {
  margin-top: 30px;
}
</style>
